<template>
  <el-table v-loading="loading" :data="tableList">
    <el-table-column label="序号" align="center" type="index" :index="indexAdd" width="100" />
    <el-table-column label="日志类型" align="center" prop="containerNo" width="100">
      <template #default="{ row }">
        <dict-tag :options="machine_log_type" :value="row.type" />
      </template>
    </el-table-column>
    <el-table-column
      label="文件名称"
      prop="fileName"
      align="center"
      :show-overflow-tooltip="true"
      width="180"
    >
    </el-table-column>
    <el-table-column label="上传时间" align="center" width="160" :show-overflow-tooltip="true">
      <template #default="{ row }">
        {{ parseTime(row?.createTime) }}
      </template>
    </el-table-column>
    <el-table-column label="URL" align="center">
      <template #default="{ row }">
        <el-link type="primary" :href="row.url" target="_blank">查看</el-link>
      </template>
    </el-table-column>
  </el-table>

  <pagination
    v-show="state.total > 0"
    :total="state.total"
    v-model:page="queryParams.pageNum"
    v-model:limit="queryParams.pageSize"
    @pagination="getList"
    :autoScroll="false"
  />
</template>

<script setup>
import { deviceErrorList } from '@/api/device/index'

const { proxy } = getCurrentInstance()
const { machine_log_type } = proxy.useDict('machine_log_type')
const props = defineProps({
  machineId: [String, Number]
})

const tableList = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const state = reactive({
  total: 0,
  loading: false
})
// type序号 - 页面切换递增
function indexAdd(index) {
  const { pageNum, pageSize } = queryParams.value
  return index + 1 + (pageNum - 1) * pageSize
}

watch(
  () => props.machineId,
  (val) => {
    if (val) {
      state.total = 0
      queryParams.pageNum = 1
      queryParams.pageSize = 10
      getList()
    }
  }
)

async function getList() {
  if (!props.machineId) return
  state.loading = true

  try {
    const r = await deviceErrorList({ machineId: props.machineId, ...queryParams.value })
    tableList.value = r.rows || []
    state.total = r.total || 0
  } finally {
    state.loading = false
  }
}
</script>
